{% extends "blog/base.html" %}

{% block title %}
    <title>{{ blog.title }}</title>
{% endblock %}

{% block meta %}
    <meta name="keywords"
          content="{{ blog.title }},{% for tag in blog.tag.all %}{{ tag }},{% endfor %}{{ blog.category }}"/>
    <meta name="description" content="{{ blog.digest|safe }}"/>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="/static/css/markdown.css">
    <link rel="stylesheet" href="/static/prism/prism.css">
{% endblock %}

{% block content %}
    <div class="mysection content">
        <article>
            <h3 class="arc-title index-title">{{ blog.title }} </h3>
            <div class="post-line bg-color">
                <ul>
                    <li><a title="{{ blog.author }}发表于{{ blog.date_time }}"><i class="el-time"></i>
                        <time>{{ blog.date_time }}</time>
                    </a></li>
                    <li><a href="#"><i class="el-user"></i>{{ blog.author }}</a></li>
                    <li><a href="#Coon" title="转到评论"><i class="el-comment"></i>{{ blog.comment }}条</a></li>
                    <li><a title="已有 {{ blog.view }} 次浏览"><i class="el-eye-open"></i>{{ blog.view }}</a></li>
                </ul>
            </div>

            <!--目录-->
            <div class="article-content bg-color markdown-body">
                <aside>
                    <h2 class="directory" style="margin-top: 5px !important; margin-bottom: 12px;">
                        <a href=" javascript:;">📒 目录</a>
                    </h2>
                    <div class="directory_list">
                        {{ toc|safe }}
                    </div>
                </aside>
            </div>

            <!--文章正文-->
            <div class="article-content bg-color markdown-body">
                <div class="post-content" style="padding: 10px 20px 20px 10px">
                    <div class="code text_dark">
                        {{ blog.content|safe }}
                    </div>
                </div>
            </div>

            <!--分享-->
            <div class="social-share" data-initialized="true" style="text-align: center; margin: 30px;">
                <a href="#" class="social-share-icon icon-weibo"></a>
                <a href="#" class="social-share-icon icon-qq"></a>
                <a href="#" class="social-share-icon icon-wechat"></a>
                <a href="#" class="social-share-icon icon-qzone"></a>
            </div>
            <hr>

            <!--标签-->
            <div class="article_tag">
                <ul>
                    <li><a href="{% url "blog:category" blog.category %}"
                           title="分类：{{ blog.category }}">{{ blog.category }}</a></li>
                    {% for tag in blog.tag.all %}
                        <li><a href="{% url "blog:tag" name=tag.tag_name %}"
                               title="标签：{{ tag.tag_name }} ">{{ tag.tag_name }}</a>&nbsp;
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <hr>
        </article>

        <!--评论表单-->
        {% include "blog/message.html" %}

        {# 评论数 #}
        <div class="comment-num">
            <span style="font-weight: 600;font-size: 1.25em;">{{ comments.count }}</span>
            <span>&nbsp;评论</span>
        </div>

        {# 评论内容 #}
        <div class="comments">
            <ul class="comment-list">
                {% for comment in comments %}
                    <li class="comment-item">
                        <a id="avatar">
                        {% if comment.avatar_address %}
                            <img class="comment-avatar" src="{{ MEDIA_URL }}{{ comment.avatar_address }}"
                                 alt="加载失败~">
                        {% else %}
                            <img class="comment-avatar" src="/static/images/icon/user.gif" alt="加载失败~">
                        {% endif %}
                        </a>
                        <span class="comment-author">{{ comment.user_name }}</span>
                        <div class="comment-meta">{{ comment.create_time }}</div>
                        <div class="comment-content">
                            <span>{{ comment.comment }}</span>
                        </div>
                        {% if comment.request_address %}
                            <p style="color: #7799 !important; font-size: xx-small">来自: {{ comment.request_address }}</p>
                        {% else %}
                            <p style="color: #7799 !important; font-size: xx-small">来自: {{ comment.request_ip }}</p>
                        {% endif %}
                        <div class="reply">
                            <a class="comment-reply-link" title="debugging...未启用">回复</a>
                        </div>
                    </li>
                {% empty %}
                    <div style="margin-bottom: 99px; margin-top: 30px; color: rgb(188 188 188);">
                        <span style="margin-left: 26px">🙈 这篇文章还没有评论哟，快来写下第一条评论吧...</span>
                    </div>
                {% endfor %}
            </ul>
        </div>

    </div>
{% endblock %}

{% block js %}
    <script src="/static/js/jquery.2.1.4.min.js"></script>
    <script src="/static/prism/prism.js" charset="utf-8"></script>
    <script src="/static/prism/clipboard.min.js"></script>
{% endblock %}
